import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Picker } from "@tarojs/components-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import right from "../assets/img/right.png";
let PickerArea = class PickerArea extends Component {
  constructor(props) {
    super(props);

    this.changeArea = () => {
      let { allProvince, allCity, allDistract, provinceIndex, cityIndex, distractIndex, levelState } = this.state;
      let res = {};
      let area = null;
      switch (levelState) {
        case 1:
          {
            res.province = {
              value: allProvince[provinceIndex]['value'],
              label: allProvince[provinceIndex]['label']
            };
            area = allProvince[provinceIndex]['label'];
            break;
          }
        case 2:
          {
            res.province = {
              value: allProvince[provinceIndex]['value'],
              label: allProvince[provinceIndex]['label']
            };
            res.city = {
              value: allCity[cityIndex]['value'],
              label: allCity[cityIndex]['label']
            };
            area = allProvince[provinceIndex]['label'] + allCity[cityIndex]['label'];
            break;
          }
        default:
          {
            res.province = {
              value: allProvince[provinceIndex]['value'],
              label: allProvince[provinceIndex]['label']
            };
            res.city = {
              value: allCity[cityIndex]['value'],
              label: allCity[cityIndex]['label']
            };
            res.distract = {
              value: allDistract[distractIndex]['value'],
              label: allDistract[distractIndex]['label']
            };
            area = allProvince[provinceIndex]['label'] + allCity[cityIndex]['label'] + allDistract[distractIndex]['label'];
            break;
          }
      }
      this.setState({
        area
      });
      // taro属性传递的方法需要以on开头
      this.props.onPicketArea(res);
      // 初始化选项数据
      this.getAllProvince();
      this.getAllCity(0);
      this.getAllDistract(0, 0);
    };

    this.state = {
      allProvince: [],
      allCity: [],
      allDistract: [],
      provinceIndex: 0,
      cityIndex: 0,
      distractIndex: 0,
      areaPicker: [],
      area: null,
      levelState: 3
    };

    this.changeArea = this.changeArea.bind(this);
  }
  componentWillMount() {
    // console.log(this.props)
    let level = this.props.level;
    let area = this.props.areaData || null;
    this.getAllProvince();
    this.getAllCity(0);
    this.getAllDistract(0, 0);
    this.setState({
      levelState: level,
      area
    });
  }
  componentDidShow() {
    // 组件中该钩子不会执行
  }
  getAllProvince() {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        // console.error(res)
        this.setState({
          allProvince: res
        }, () => {
          this.setAreaPicker();
        });
      }
    });
  }
  getAllCity(index = 0) {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        //console.log(res)
        this.setState({
          allCity: res
        }, () => {
          this.setAreaPicker();
        });
      }
    });
  }
  getAllDistract(indexProvince = 0, indexCity = 0) {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllDistractFromLocal({
      indexProvince,
      indexCity,
      callBack: res => {
        //console.log(res)
        this.setState({
          allDistract: res
        }, () => {
          this.setAreaPicker();
        });
      }
    });
  }
  setAreaPicker() {
    let { allProvince, allCity, allDistract, levelState } = this.state;
    switch (levelState) {
      case 1:
        {
          this.setState({
            areaPicker: [allProvince]
          });
          break;
        }
      case 2:
        {
          this.setState({
            areaPicker: [allProvince, allCity]
          });
          break;
        }
      default:
        {
          this.setState({
            areaPicker: [allProvince, allCity, allDistract]
          });
          break;
        }
    }
  }
  cancelArea() {
    // 初始化选项数据
    this.getAllProvince();
    this.getAllCity(0);
    this.getAllDistract(0, 0);
  }
  onColumnChange(e) {
    // console.log(e.detail)
    let { column, value } = e.detail;
    if (column === 0) {
      // 选择省
      this.getAllCity(value);
      this.getAllDistract(value, 0);
      this.setState({
        provinceIndex: value
      });
    }
    if (column === 1) {
      this.getAllDistract(this.state.provinceIndex, value);
      this.setState({
        cityIndex: value
      });
    }
    if (column === 2) {
      this.setState({
        distractIndex: value
      });
    }
  }
  render() {
    let { areaPicker, area } = this.state;
    return <Picker className="input-picker" name="receiverAddress" mode="multiSelector" range={areaPicker} rangeKey="label" onChange={this.changeArea} onCancel={this.cancelArea.bind(this)} onColumnChange={this.onColumnChange.bind(this)}>
        <View className="tt">
          {!area && <View className="from-input picker-con placeholder-class">请选择</View>}
          {area && <View className="from-input picker-con">{area}</View>}
          <Image className="drop-down-icon" src={right} />
        </View>
      </Picker>;
  }
};
PickerArea = tslib_1.__decorate([inject("stores"), observer], PickerArea);
export default PickerArea;